<template>
  <div>
    <el-container>
      <el-main>
        <div class="enter-container">
          <div class="top-text">
            <i class="el-icon-warning-outline" />
            <span> 找回密码</span>
          </div>
          <el-form
            ref="form"
            label-position="right"
            :model="form"
            :rules="rules"
            label-width="180px"
            @keyup.enter.native="submitForm"
          >
            <el-form-item label="邮箱：" prop="userEmail">
              <el-input v-model="form.userEmail" placeholder="邮箱：" />
            </el-form-item>

            <el-form-item label="验证码：" prop="code">
              <el-col :span="14">
                <el-input
                  v-model="form.code"
                  class="verify"
                  style="margin-right: 100px"
                  placeholder="右侧图形验证码"
                />
              </el-col>
              <el-col :span="9" :offset="1">
                <el-button class="code" :disabled="!show" type="success" @click="getCode">
                  {{ show ? '获取验证码' : count }}
                </el-button>
              </el-col>
            </el-form-item>
            <el-form-item label="新密码：" prop="userPassword">
              <el-input
                v-model="form.userPassword"
                placeholder="新密码"
                show-password
              />
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            style="width: 240px"
            @click="submitForm"
          >重置密码</el-button>
          <el-row>
            有账号？
            <el-link
              style="font-size: 16px !important"
              :underline="false"
              type="primary"
              @click="jumpLogin"
            >去登录
            </el-link>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { verifyMixin } from '@/common/mixins'
import { sendVerifyCode, modifyPassword } from '@/networks/enter'

export default {
  name: 'Login',
  mixins: [verifyMixin],
  data() {
    return {
      form: {
        userEmail: '',
        userPassword: '',
        code: ''
      },
      show: true,
      count: '',
      timer: null,
      rules: {
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      verifyCode: ''
    }
  },
  created() {
    this.refreshCode()
    this.form.code = ''
  },
  activated() {
    this.refreshCode()
    this.form.code = ''
  },
  methods: {
    jumpLogin() {
      this.$router.push('/login')
    },
    getCode() {
      this.$refs.form.validateField('userEmail', res => {
        if (res.length === 0) {
          if (!this.timer) {
            sendVerifyCode({ email: this.form.userEmail }).then(res => {
              res = res.data
              if (res.status === 0) {
                this.$message.error(res.msg)
              } else {
                this.$message.success(res.msg)
                this.verifyCode = res.data
                this.setIntervalCode()
              }
            })
          }
        }
      })
    },
    setIntervalCode() {
      const TIME_COUNT = 60
      this.count = TIME_COUNT
      this.show = false
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--
        } else {
          this.show = true
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return false

        modifyPassword({ code: this.form.code, verifyCode: this.verifyCode,
          email: this.form.userEmail, password: this.form.userPassword }).then(res => {
          res = res.data
          if (res.status === 0) {
            this.$message.error(res.msg)
          } else {
            this.$message.success(res.msg)
            this.$store.commit('set', {
              token: res.data.token,
              user: res.data.user
            })
            this.$router.push(this.$route.query.redirect || '/')
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.el-container {
  width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.el-main {
  text-align: center;
}

.el-row {
  line-height: 40px;
  margin-bottom: 20px;
}

.enter-container {
  height: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 600px;
  background-color: #ffffff;
}

.top-text {
  font-size: 30px;
  height: 150px;
  line-height: 150px;
}

.login-code {
  cursor: pointer;
}

div /deep/ .el-form-item__content {
  margin-right: 120px;
}

.code {
  width: 100%;
}
.el-button--success.is-disabled{
    background-color: #91e66d;
    border-color: #91e66d;
}
</style>
